import React,{useEffect,useState,useRef} from 'react';
import { connect } from 'react-redux';
import './cart.less';
import axios from 'axios';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {useAddkey} from "@/hooks/vid"
interface Props {}

function Kefulist(props: Props) {
  const {} = props;
  const [data,setdata]=useState([])
  useEffect(() => {
    axios.get("/fuwulist").then(res=>{
      setdata(useAddkey(res.data.data))
    })
  }, [])
  console.log(data);
  const inpp:any=useRef()
  const sou=()=>{
    console.log(inpp.current.value);
    const search=inpp.current.value
   axios.get("/fuwulist",{
    params:{search}
   }).then(res=>{
    setdata(res.data)
   })
  }
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }
  
  const columns: ColumnsType<DataType> = [
    {
      title: 'ID',
      dataIndex: 'vsid',
      key: 'vsid',
    },
    {
      title: '游客id',
      dataIndex: 'visitor_id',
      key: 'visitor_id',
    },
    {
      title: '游客名称',
      dataIndex: 'visitor_name',
      key: 'visitor_name',
    },
    {
      title: 'Ip',
      dataIndex: 'visitor_ip',
      key: 'visitor_ip',
    },
    {
      title: '接待客服',
      dataIndex: 'kefu_name',
      key: 'kefu_name',
    },
    {
      title: '开始时间',
      dataIndex: "start_date",
      key: "start_date",
    },
    {
      title: '结束时间',
      dataIndex: 'end_date',
      key: 'end_date',
    },
  ];

  return (
    <div className="box">
      <div className="head">
        <div className='aa'>
          <div>接待客服</div>
          <input type="text" className="inp"  ref={inpp}/>
        </div>
        <button className="btn" onClick={sou}>搜索</button>
      </div>
     <div><Table columns={columns} dataSource={data} /></div>
    </div>
  );
}

const mapStateToProps = () => ({});

export default connect(mapStateToProps)(Kefulist);
